/**
 * 型体页纯粹达成率图表组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import http from '@/axios/http'
import adaptivePx from '@/utils/adaptivePx'

const route = useRoute()
const model = ref(route.query.model)

const main = ref()
const pureChart = ref()
let myChart = null

const date = new Date()
const lastYear = (date.getFullYear() - 1) + '年'
const thisYear = date.getFullYear() + '年'

async function getPureChart() {
  await http.post('/model/getPureChart', {
    model: model.value
  }).then(res => {
    pureChart.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function init() {
  myChart = echarts.init(main.value, null, { renderer: 'svg'})

  let option = {
    title: {
      text: '纯粹达成率',
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(16),
        fontWeight: 'normal'
      },
      left: '2%',
      top: '2%'
    },
    color: ['#1e90ff', '#2fa8c3'],
    legend: {
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      top: '2%',
      right: '2%',
      data: [lastYear, thisYear]
    },
    grid: {
      left: '3%',
      top: '27%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        color: 'white',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      data: pureChart.value.factory
    },
    yAxis: {
      axisLabel: {
        color: 'white',
        formatter: '{value} %',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      axisLine: {
        lineStyle: {
          type: 'solid'
        },
        show: true
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#666'
        },
        show: true
      }
    },
    series: [
      {
        name: lastYear,
        type: 'bar',
        data: pureChart.value.lastPure,
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(14),
          fontWeight: 'normal',
          formatter: function(params) {
            if (params && params.data > 0) {
              return params.data + '%'
            }
            return ''
          },
          textBorderColor: 'inherit',
          textBorderWidth: adaptivePx(2),
          position: 'top'
        },
        barWidth: '15%'
      },
      {
        name: thisYear,
        type: 'bar',
        data: pureChart.value.thisPure,
        label: {
          show: true,
          color: 'white',
          fontSize: adaptivePx(14),
          fontWeight: 'normal',
          formatter: function(params) {
            if (params && params.data > 0) {
              return params.data + '%'
            }
            return ''
          },
          textBorderColor: 'inherit',
          textBorderWidth: adaptivePx(2),
          position: 'top'
        },
        barWidth: '15%'
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        axis: 'x',
      },
      textStyle: {
        color: 'black',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      backgroundColor: 'rgba(171, 182, 212, 0.9)',
      borderWidth: 0,
      position: function (point, params, dom, rect, size) {
        return [point[0] - size.contentSize[0] - adaptivePx(20), point[1] - size.contentSize[1] * 0.5]
      },
      formatter: function (params) {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
        let data = pureChart.value.operation[params[0].name]
        let content = ''

        if (!data) {
          return "暂无数据"
        }

        content += `
          <table style="text-align: center; font-weight: normal;">
            <thead>
              <tr>
                <th></th>
        `

        if (data.thisPure) {
          content += `
                <th>&nbsp;${ year + "年" + month + "月" }&nbsp;</th>
          `
        }

        if (data.lastPure) {
          content += `
                <th>&nbsp;${ (year - 1) + "年" + month + "月" }&nbsp;</th>
          `
        }

        if (data.thisPure && data.lastPure) {
          content += `
                <th>&nbsp;VS${ String(year - 1).substring(2) }&nbsp;</th>
          `
        }

        content += `
              </tr>
            </thead>
            <tbody>
        `

        content += `
              <tr>
                <td>加工1</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate1 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate1 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate1 - data.lastPure.rate1
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
              <tr>
                <td>裁断</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate2 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate2 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate2 - data.lastPure.rate2
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
              <tr>
                <td>鞋面</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate3 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate3 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate3 - data.lastPure.rate3
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
              <tr>
                <td>半成品</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate4 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate4 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate4 - data.lastPure.rate4
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
              <tr>
                <td>成型</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate5 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate5 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate5 - data.lastPure.rate5
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
              <tr>
                <td>合计</td>
        `

        if (data.thisPure) {
          content += `
                <td>${ data.thisPure.rate6 }%</td>
          `
        }

        if (data.lastPure) {
          content += `
                <td>${ data.lastPure.rate6 }%</td>
          `
        }

        if (data.thisPure && data.lastPure) {
          let diff = data.thisPure.rate6 - data.lastPure.rate6
          if (diff > 0) {
            content += `
                <td style="color: blue;">${ diff }%</td>
            `
          } else {
            content += `
                <td style="color: red;">${ diff }%</td>
            `
          }
        }

        content += ` 
              </tr>
        `

        content += `
            </tbody>
          </table>
        `

        return content
      }
    }
  }

  myChart.setOption(option)
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(async () => {
  await getPureChart()
  init()
  
  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="model-pure-chart" ref="main"></div>
</template>

<style lang="scss" scoped>
#model-pure-chart {
  width: 100%;
  height: 100%;
}
</style>